<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use common\models\shop\ShopGoods;
use kartik\datetime\DateTimePicker;
use common\models\shop\ShopGoodsCategory;
use yii\helpers\ArrayHelper;
use kartik\file\FileInput;
use common\models\shop\ShopDispatch;
use yii\web\JsExpression;
use kartik\tabs\TabsX;
use yii\helpers\Url;
/* @var $this yii\web\View */
/* @var $model common\models\shop\ShopGoods */
/* @var $form yii\widgets\ActiveForm */
?>

<style type="text/css">
    .spectable td,.spectable th {border:1px solid #ccc; vertical-align: middle;text-align:center;}
    .spectable th { font-weight: bold;}
    .spectableinput { text-align: center;}
    .f {border-color: #b94a48;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}
    .table.table-bordered tr th,.table.table-bordered tr td{overflow:hidden; text-overflow:ellipsis;}
</style>

<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <div class="panel-body">

                <div class="adv-table editable-table ">
                    <div class="shop-goods-form">
                        <?php $form = ActiveForm::begin([
                            'options' => ['class' => 'form-horizontal','enctype' => 'multipart/form-data'],
                            'fieldConfig' => [
                                'template' => "<div class='col-xs-3 col-sm-2 text-right'>{label}</div><div class='col-xs-9 col-sm-7'>{input}</div><div class='col-xs-12 col-xs-offset-3 col-sm-3 col-sm-offset-0'>{error}</div>",
                            ]
                        ]); ?>

                        <div class="form-group">
                            <label class="checkbox-inline col-xs-12 col-sm-2 col-md-2 control-label">
                                <input type="checkbox" id="hasoption" value="1" name="hasoption" {if $item['hasoption']==1}checked{/if} />启用商品规格
                            </label>
                            <div class="col-sm-9 col-xs-12">
                                <span class="help-block">启用商品规格后，商品的价格及库存以商品规格为准,库存设置为0则不显示,-1为不限制</span>
                            </div>
                        </div>
                        <div id='tboption''>
                        <div class="alert alert-info">
                            1. 拖动规格可调整规格显示顺序, 更改规格及规格项后请点击下方的【刷新规格项目表】来更新数据。<br/>
                            2. 每一种规格代表不同型号，例如颜色为一种规格，尺寸为一种规格，如果设置多规格，手机用户必须每一种规格都选择一个规格项，才能添加购物车或购买。
                        </div>
                        <div id='specs'>
<!--                            {loop $allspecs $spec}-->
<!--                            {php include $this->template('spec')}-->
<!--                            {/loop}-->
                        </div>
                        <table class="table">
                            <tr>
                                <td>
                                    <h4><a href="javascript:;" class='btn btn-primary' id='add-spec' onclick="addSpec()" style="margin-top:10px;margin-bottom:10px;"title="添加规格"><i class='fa fa-plus'></i> 添加规格</a>
                                        <a href="javascript:;" onclick="calc()" title="刷新规格项目表" class="btn btn-primary"><i class="fa fa-refresh"></i> 刷新规格项目表</a></h4>
                                </td>
                            </tr>
                        </table>
                        <div class="panel-body table-responsive" id="options" style="padding:0;">
                        </div>
                    </div>

                        <div class="form-group">
                            <?= Html::submitButton($model->isNewRecord ? '确认提交' : '确认更新', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
                        </div>
                        <?php ActiveForm::end(); ?>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>


<script>
    <?php $this->beginBlock('js_end') ?>
        $(function(){
            $('#specs').sortable({
                stop: function(){
                    window.optionchanged = true;
                }
            });
            $('.spec_item_items').sortable(
                {
                    handle:'.fa-arrows',
                    stop: function(){
                        window.optionchanged = true;
                    }
                }
            );
            $("#hasoption").click(function(){
                var obj = $(this);
                if (obj.get(0).checked){
                    $("#tboption").show();
                }else{
                    $("#tboption").hide();
                }
            });
        })
    function addSpec(){
        $("#add-spec").html("正在处理...").attr("disabled", "true").toggleClass("btn-primary");
        var url = "/shop/goods/spec";
        $.ajax({
            "url": url,
            success:function(data){
                $("#add-spec").html('<i class="fa fa-plus"></i> 添加规格').removeAttr("disabled").toggleClass("btn-primary"); ;
                $('#specs').append(data);
                var len = $(".add-specitem").length -1;
                $(".add-specitem:eq(" +len+ ")").focus();
                window.optionchanged = true;
            }
        });
    }
    function removeSpec(specid){
        if (confirm('确认要删除此规格?')){
            $("#spec_" + specid).remove();
            window.optionchanged = true;
        }
    }
    function addSpecItem(specid){
        $("#add-specitem-" + specid).html("正在处理...").attr("disabled", "true");
        var url = "/shop/goods/specitem" + "?specid=" + specid;
        $.ajax({
            "url": url,
            success:function(data){
                $("#add-specitem-" + specid).html('<i class="fa fa-plus"></i> 添加规格项').removeAttr("disabled");
                $('#spec_item_' + specid).append(data);
                var len = $("#spec_" + specid + " .spec_item_title").length -1;
                $("#spec_" + specid + " .spec_item_title:eq(" +len+ ")").focus();
                window.optionchanged = true;
            }
        });
    }
    function removeSpecItem(obj){
        $(obj).parent().parent().parent().remove();
    }
    function calc(){

        window.optionchanged = false;
        var html = '<table class="table table-bordered table-condensed"><thead><tr class="active">';
        var specs = [];
        $(".spec_item").each(function(i){
            var _this = $(this);

            var spec = {
                id: _this.find(".spec_id").val(),
                title: _this.find(".spec_title").val()
            };

            var items = [];
            _this.find(".spec_item_item").each(function(){
                var __this = $(this);
                var item = {
                    id: __this.find(".spec_item_id").val(),
                    title: __this.find(".spec_item_title").val(),
                    show:__this.find(".spec_item_show").get(0).checked?"1":"0"
                }
                items.push(item);
            });
            spec.items = items;
            specs.push(spec);
        });
        specs.sort(function(x,y){
            if (x.items.length > y.items.length){
                return 1;
            }
            if (x.items.length < y.items.length) {
                return -1;
            }
        });

        var len = specs.length;
        var newlen = 1; //多少种组合
        var h = new Array(len); //显示表格二维数组
        var rowspans = new Array(len); //每个列的rowspan
        for(var i=0;i<len;i++){
            //表头
            html+="<th style='width:80px;'>" + specs[i].title + "</th>";

            //计算多种组合
            var itemlen = specs[i].items.length;
            if(itemlen<=0) { itemlen = 1 };
            newlen*=itemlen;

            //初始化 二维数组
            h[i] = new Array(newlen);
            for(var j=0;j<newlen;j++){
                h[i][j] = new Array();
            }
            //计算rowspan
            var l = specs[i].items.length;
            rowspans[i] = 1;
            for(j=i+1;j<len;j++){
                rowspans[i]*= specs[j].items.length;
            }
        }

        html += '<th class="info" style="width:130px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">库存</div><div class="input-group"><input type="text" class="form-control option_stock_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_stock\');"></a></span></div></div></th>';
        html += '<th class="success" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">销售价格</div><div class="input-group"><input type="text" class="form-control option_marketprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_marketprice\');"></a></span></div></div></th>';
        html+='<th class="warning" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">市场价格</div><div class="input-group"><input type="text" class="form-control option_productprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_productprice\');"></a></span></div></div></th>';
        html+='<th class="danger" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">成本价格</div><div class="input-group"><input type="text" class="form-control option_costprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_costprice\');"></a></span></div></div></th>';
        html+='<th class="info" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">重量（克）</div><div class="input-group"><input type="text" class="form-control option_weight_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_weight\');"></a></span></div></div></th>';
        html+='</tr></thead>';

        for(var m=0;m<len;m++){
            var k = 0,kid = 0,n=0;
            for(var j=0;j<newlen;j++){
                var rowspan = rowspans[m]; //9
                if( j % rowspan==0){
                    h[m][j]={title: specs[m].items[kid].title, html: "<td rowspan='" +rowspan + "'>"+ specs[m].items[kid].title+"</td>\r\n",id: specs[m].items[kid].id};
                    //	k++; if(k>specs[m].items.length-1) { k=0; }
                }
                else{
                    h[m][j]={title:specs[m].items[kid].title, html: "",id: specs[m].items[kid].id};
                }
                n++;
                if(n==rowspan){
                    kid++; if(kid>specs[m].items.length-1) { kid=0; }
                    n=0;
                }
            }
        }

        var hh = "";
        for(var i=0;i<newlen;i++){
            hh+="<tr>";
            var ids = [];
            var titles = [];
            for(var j=0;j<len;j++){
                hh+=h[j][i].html; //每一行的每个规格项列
                ids.push( h[j][i].id);
                titles.push( h[j][i].title);
            }
            ids =ids.join('_');
            titles= titles.join('+');

            var val ={ id : "",title:titles, stock : "",costprice : "",productprice : "",marketprice : "",weight:"" };
            if( $(".option_id_" + ids).length>0){
                val ={
                    id : $(".option_id_" + ids+":eq(0)").val(),
                    title: titles,
                    stock : $(".option_stock_" + ids+":eq(0)").val(),
                    costprice : $(".option_costprice_" + ids+":eq(0)").val(),
                    productprice : $(".option_productprice_" + ids+":eq(0)").val(),
                    marketprice : $(".option_marketprice_" + ids +":eq(0)").val(),
                    weight : $(".option_weight_" + ids+":eq(0)").val()
                }
            }
            hh += '<td class="info">'
            hh += '<input name="option_stock_' + ids +'[]"type="text" class="form-control option_stock option_stock_' + ids +'" value="' +(val.stock=='undefined'?'':val.stock )+'"/></td>';
            hh += '<input name="option_id_' + ids+'[]"type="hidden" class="form-control option_id option_id_' + ids +'" value="' +(val.id=='undefined'?'':val.id )+'"/>';
            hh += '<input name="option_ids[]"type="hidden" class="form-control option_ids option_ids_' + ids +'" value="' + ids +'"/>';
            hh += '<input name="option_title_' + ids +'[]"type="hidden" class="form-control option_title option_title_' + ids +'" value="' +(val.title=='undefined'?'':val.title )+'"/></td>';
            hh += '</td>';
            hh += '<td class="success"><input name="option_marketprice_' + ids+'[]" type="text" class="form-control option_marketprice option_marketprice_' + ids +'" value="' +(val.marketprice=='undefined'?'':val.marketprice )+'"/></td>';
            hh += '<td class="warning"><input name="option_productprice_' + ids+'[]" type="text" class="form-control option_productprice option_productprice_' + ids +'" " value="' +(val.productprice=='undefined'?'':val.productprice )+'"/></td>';
            hh += '<td class="danger"><input name="option_costprice_' +ids+'[]" type="text" class="form-control option_costprice option_costprice_' + ids +'" " value="' +(val.costprice=='undefined'?'':val.costprice )+'"/></td>';
            hh += '<td class="info"><input name="option_weight_' + ids +'[]" type="text" class="form-control option_weight option_weight_' + ids +'" " value="' +(val.weight=='undefined'?'':val.weight )+'"/></td>';
            hh += "</tr>";
        }
        html+=hh;
        html+="</table>";
        $("#options").html(html);
    }
    function setCol(cls){
        $("."+cls).val( $("."+cls+"_all").val());
    }
    function showItem(obj){
        var show = $(obj).get(0).checked?"1":"0";
        $(obj).next().val(show);
    }
    function nofind(){
        var img=event.srcElement;
        img.src="./resource/image/module-nopic-small.jpg";
        img.onerror=null;
    }

    <?php $this->endBlock(); ?>
    <?php $this->registerJs($this->blocks['js_end'],\yii\web\View::POS_END);//将编写的js代码注册到页面底部 ?>
</script>